<!DOCTYPE html>
<html class="desktop landscape">
	<head>
		<title>选择时间</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<link href="/static/api/yuyue/css/am_min.css" rel="stylesheet" type="text/css" />
		<link href="/static/api/yuyue/css/page_min.css" rel="stylesheet" type="text/css" />
		<link href="/static/api/yuyue/css/black.css" rel="stylesheet" type="text/css" />
		<link href="/static/api/yuyue/css/yuyue.css" rel="stylesheet" type="text/css" />
		
	</head>
<body class="theme1">
<div class="am-widthLimite am-touchable" id='box'>
	<div class="am-app" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
		<div class="am-page page_appointment am-touchable" id="page_appointment2" style="display: block; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
			<div class="am-body-wrap am-touchable" style="top: 44px; bottom: 0px;">
				<div class="am-body-inner" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
					<div class="setup_form appointment_form" style="display:block">
						<div class="barber">
							<div class="img">
								<img style="background-color: rgb(204, 204, 204);" :src="userinfo.headurl">
							</div>
							<div class="time">
								<strong>${myhours}:${myminute}</strong><br>${mymonth}/${mydate}(${myday})
							</div>
							<div class="name">${userinfo.name}<span class="level">${userinfo.zhiwei}/${userinfo.zhicheng}</span></div>
						</div>
						<div class="select_label">预约项目</div>
						<div v-if="subjectlist == '' " class="appointment_form_select">暂无数据</div>
						<div v-else class="appointment_form_select">
							<ul class="select_options">
								<template v-for="(item,index) in subjectlist">
									<li :class="item.selected_class ? 'am-clickable selected' : 'am-clickable' " v-on:click="choosexm(index)">${item.name}</li>
								</template>
							</ul>
							<div class="clear"></div>
						</div>
						<div class="select_label">预约人数</div>
						<div class="appointment_form_select">
							<ul class="appointment_form_tab number">
								<template v-for="(item,index) in numlist">
									<li :class="item.selected_class ? 'am-clickable selected' : 'am-clickable' " v-on:click="choosenum(index)">${item.num}人</li>
								</template>
							</ul>
							<div class="clear" style="height:5px"></div>
						</div>
						<div class="select_label gpsmap" style="display: block;">备注</div>
						<div class="appointment_form_select gpsmap" style="display: block;">
							<textarea class="gpsmap_txt" rows="4" name="remarks"></textarea>
						</div>
						<div class="page_button blue submit am-clickable" style="font-size:12px;" v-on:click="postyuyue()">立即预约</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" name="user_id" id="user_id" value="{{user_id}}">
	<input type="hidden" name="yuyue_time" id="yuyue_time" value="{{yuyue_time}}">
	<input type="hidden" name="sMobile" id="sMobile" value="{{sMobile}}">
	<input type="hidden" name="sName" id="sName" value="{{sName}}">
</div>
</body>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="http://commfile.oss-cn-shanghai.aliyuncs.com/js/layer.js"></script>
</html>
<script type='text/javascript'>
var vm; //定义vm全局变量
vm = new Vue({
	el: '#box',
	data: {
		userinfo: '',
		mymonth: '',
		mydate: '',
		myhours: '',
		myminute: '',
		myday: '',
		numlist: '',
		subjectlist: '',
		mysubject: '',
		mynum: '',
	},
	methods: {
		getinfo: function() {
			var user_id = document.getElementById('user_id').value;
			var yuyue_time = document.getElementById('yuyue_time').value;
			var mymonth = parseInt(('00' + (new Date(yuyue_time*1000)).getMonth()).substr(-2,2)) + 1;
			var mydate = ('00' + (new Date(yuyue_time*1000)).getDate()).substr(-2,2);
			var myhours = ('00' + (new Date(yuyue_time*1000)).getHours()).substr(-2,2);
			var myminute = ('00' + (new Date(yuyue_time*1000)).getMinutes()).substr(-2,2);
			var myday = (new Date(yuyue_time*1000)).getDay();

			switch(myday) {
				case 0:
					this.myday = '周日';
				break;
				case 1:
					this.myday = '周一';
				break;
				case 2:
					this.myday = '周二';
				break;
				case 3:
					this.myday = '周三';
				break;
				case 4:
					this.myday = '周四';
				break;
				case 5:
					this.myday = '周五';
				break;
				case 6:
					this.myday = '周六';
				break;
				default:
					this.myday = '';
			}

			this.mymonth = mymonth;
			this.mydate = mydate;
			this.myhours = myhours;
			this.myminute = myminute;

			$.ajax({
				type: 'post',
				url: '/wxfen/wxfen/getyuyueinfo',
				data: {
					user_id: user_id,
				},
				success: function(ret) {
					vm.userinfo = ret.userinfo[0];
					var subjectlist = [];

					for(var i=0;i<ret.subjectlist.length;i++) {
						subjectlist.push({
							"id":ret.subjectlist[i].id,
							"name":ret.subjectlist[i].name,
							"selected_class":false,
						});
					}

					vm.subjectlist = subjectlist;
				},
				error: function(err) {
					alert(JSON.stringify(err));
				}
			});
		},
		setnumlist: function() {
			var numlist = [
				{"num":1,"selected_class":false},
				{"num":2,"selected_class":false},
				{"num":3,"selected_class":false},
				{"num":4,"selected_class":false},
				{"num":5,"selected_class":false},
				{"num":'多',"selected_class":false},
			];

			this.numlist = numlist;
		},
		choosenum: function(index) {
			for(var i=0;i<this.numlist.length;i++) {
				//先将选中的class属性去掉
				this.numlist[i].selected_class = false;
			}

			//将点击的增加选中的class属性
			this.numlist[index].selected_class = true;
			this.mynum = this.numlist[index].num;
		},
		choosexm: function(index) {
			//先将其他选中的class去掉
			for(var i=0;i<this.subjectlist.length;i++) {
				this.subjectlist[i].selected_class = false;
			}

			//将点中的元素加上选中class
			this.subjectlist[index].selected_class = true;
			this.mysubject = this.subjectlist[index].id;
		},
		postyuyue: function() {
			//提交预约信息
			var user_id = document.getElementById('user_id').value;
			var yuyue_time = document.getElementById('yuyue_time').value;
			var sMobile = document.getElementById('sMobile').value;
			var sName = document.getElementById('sName').value;
			var mynum = this.mynum;
			var mysubject = this.mysubject;
			var myremarks = document.getElementsByName('remarks')[0].value;
			var addtime = (Date.parse(new Date()))/1000;

			if(!user_id && !yuyue_time && !sMobile && !sName && !mynum && !mysubject) {
				alert("请选择完整的信息！");

				return false;
			}

			layer.open({
				type: 2,
				content: '加载中',
				shade: 'background-color: rgba(0,0,0,0.3)',
				shadeClose: false,
			});

			setTimeout(function() {
				$.ajax({
					type: 'post',
					data: {
						"user_id":user_id,
						"yuyue_time":yuyue_time,
						"sMobile":sMobile,
						"sName":sName,
						"mynum":mynum,
						"mysubject":mysubject,
						"myremarks":myremarks,
						"addtime":addtime,
					},
					url: "/wxfen/wxfen/postyuyue",
					success: function(ret) {
						if(100 == ret.code) {
							alert(ret.msg);

							//关闭loading层
							layer.closeAll();

							//执行跳转页面
							window.location.href = "/wxfen/wxfen/myyuyue.html?sMobile="+sMobile+"&sName="+sName;
						} else {
							//关闭loading层
							layer.closeAll();

							alert(ret.msg);
						}
					},
					error: function(err) {
						//关闭loading层
						layer.closeAll();

						alert(JSON.stringify(err));
					}
				});
			},500);
		}
	},
	mounted:function() {
		this.getinfo();
		this.setnumlist();
	},
    delimiters:['${', '}'],
});
</script>
